<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="$t('modify')"
    width="70%"
  >
    <dynForm
      ref="dataForm"
      :info-form="searchForm"
      :rules="rules"
      :search-tags="searchTags"
      :is-inline="true"/>
    <!-- 动态生成表单部分 -->
    <dynGenerateForm :dyn-form-items="dynFormItems" prop-item-name="itemId" />
    <dynTable
      ref="dynTable"
      :loading="false"
      :table-data="tableData"
      :table-columns="tableColumns"
    />
    <span slot="footer">
      <el-button
        icon="el-icon-circle-close"
        @click="handleClose"
      >{{ $t("cancel") }}</el-button>
      <el-button
        v-btnThrottle="doSave"
        type="primary"
        icon="el-icon-receiving"
      >{{ $t("save") }}</el-button>
  </span></el-dialog>
</template>

<script>
import { getDetails, getItemListById, doValied } from '@/api/checkManagement/checkhistory'
import dynGenerateForm from '@/components/DynGenerateForm'
export default {
  name: 'CheckhistoryEdit',
  components: { dynGenerateForm },
  data() {
    return {
      dialogVisible: false,
      searchForm: {},
      searchTags: [
        { label: this.$t('checkFormNumber'), prop: 'checkFormNo', tag: 'DynInput', disabled: true },
        { label: this.$t('checkOpportunity'), prop: 'checkOpportunityName', tag: 'DynInput', disabled: true }
      ],
      rules: {
        eqpStatusEdit: [{ required: true, message: `${this.$t('pleaseSelect')}${this.$t('ModifiedStatus')}`, trigger: 'change' }]
      },
      tableData: [],
      dynFormItems: [], // 动态生成表单
      tableColumns: Object.freeze([
        { prop: 'sampleID', label: this.$t('sampleTubeNo') },
        { prop: 'binNo', label: this.$t('BinNumber') },
        { prop: 'sampleItemName', label: this.$t('testItem') },
        { prop: 'min', label: this.$t('lowerLimit') },
        { prop: 'containMin', label: this.$t('includesLowerLimit'), templete: (_scope) => {
          return (
            <el-switch
              v-model={_scope.row.containMin}
              active-value={1}
              inactive-value={0}
              active-color={'#13ce66'}
              inactive-color={'#ff4949'}
              disabled/>
          )
        } },
        { prop: 'max', label: this.$t('upperLimit') },
        { prop: 'containMax', label: this.$t('includesUpperLimit'), templete: (_scope) => {
          return (
            <el-switch
              v-model={_scope.row.containMax}
              active-value={1}
              inactive-value={0}
              active-color={'#13ce66'}
              inactive-color={'#ff4949'}
              disabled/>
          )
        } },
        { prop: 'value', label: this.$t('testValue'), templete: (_scope) => {
          return (
            <el-input
              v-model={_scope.row.value}
              on-change={this.changeValue.bind(this, _scope.row)}
              clearable>
            </el-input>
          )
        } }
      ])
    }
  },
  methods: {
    handleOpen(row) {
      if (row && row.id) {
        this.searchForm = row
        getDetails({ formId: row.id }).then(res => {
          this.tableData = res.data
        })
        getItemListById({ formId: row.id }).then(res => {
          this.dynFormItems = res.data
        })
      }
      this.dialogVisible = true
    },
    doSave() {
      const formArr = this.dynFormItems.map((item) => {
        return (
          {
            id: item.id,
            itemValue: item.itemValue
          }
        )
      })
      const tableArr = this.tableData.map(item => {
        return (
          {
            id: item.id,
            itemValue: item.value
          }
        )
      })
      doValied(formArr.concat(tableArr)).then(res => {
        this.$betterTips(res, this.handleClose, this.handleUpdate)
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    },
    changeValue(row) {
      this.$message({
        message: '没接口, 写不了',
        type: 'success'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.opt-btns{
    display: flex;
    justify-content: space-between;
    align-content: center;
    height: 40px;
    margin-bottom: 20px;
}
.result-item{
  display: flex;
  .result-pass{
    margin-right: 20px;
  }
}
</style>
